import Link from 'next/link'
import { Tabs, Card, Col, Row, Spin } from 'antd'
import Layout from './../components/Layout'
const { Meta } = Card;

const TabPane = Tabs.TabPane
export default class Detail extends React.Component {
  
  static async getInitialProps ({query}) {
    const { id } = query
    const detail = await fetch(`https://www.ikanfan.cn/tool/xcxDetail.php?id=${id}`)
    const playlist = await fetch(`https://www.ikanfan.cn/tool/xcxplaylist.php?id=${id}`)
    const detailData = await detail.json()
    const playlistData = await playlist.json()

    return { data: detailData.data[0], playlist: playlistData.data.Data}
  }

  constructor (props) {
    super(props)
    this.state = {
      playerData: [],
      close: false,
    }
  }

  playName(a) {
    var b = []
    b['tudou'] = '土豆'
    b['youku'] = '优酷'
    b['iqiyi'] = '爱奇艺'
    b['letv'] = '乐视'
    b['sohu'] = '搜狐'
    b['pptv'] = '聚力'
    b['qq'] = '腾讯'
    b['letvyun'] = '乐视云'
    b['bilibili'] = '哔哩哔哩'
    b['acfun'] = 'A站'
    b['other'] = '其他'
    b['pv'] = 'PV'
    b['bgm'] = 'BGM'
    b['ed'] = 'ED'
    b['cm'] = 'CM'
    b['op'] = 'OP'
    b['mad'] = 'MAD'
    b['yugao'] = '预告'
    return b[a]
  }

  onPlay ( url ) {
    const d1 = url.split('/')[3].split('-')
    const d2 = d1[1].split('.')
    const sid = d1[0]
    const pid = d2[0]
    const { playlist } = this.props
    let playerData = []
    for (let e = 0; e < playlist.length; e++) {
      const d = playlist[e].playurls[parseInt(pid) - 1]
      pid <= playlist[e].playurls.length && playerData.push({ type: playlist[e].playname, vid: d[1], name: this.playName(playlist[e].playname), title: d[0], url: d[2] })
    }
    this.setState({
      playerData,
      close: true
    })
    console.log( url, sid, pid, playlist, playerData )
  }

  render () {
    const { data, playlist = [] } = this.props
    const { playurls = [] } = playlist[0]
    // console.log(this.props, playurls)
    return (
      <Layout title={data.name}>
        {data.name} <br />
        {data.pic} <br />
        {data.content}<br />
        {data.actor}<br />
        { playurls.map(item => <li key={item[1]} onClick={() => this.onPlay(item[2])}>{item[0]}</li>) }
      </Layout>
    )
  }
}